<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Events calendar - custom data storage</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />

	<!-- External dependencies -->
    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>
    <script src="../../external/cultures/globalize.cultures.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
	    	
	<!-- Note, built-in datastorage not used in this sample, we are using amplify.store for custom data storage -->
	
    <script src="../explore/js/amplify.core.min.js" type="text/javascript"></script>
    <script src="../explore/js/amplify.request.min.js" type="text/javascript"></script>
    <script src="../explore/js/amplify.store.min.js" type="text/javascript"></script>
	<!--
	-->
	<!-- Wijmo-Open dependencies -->
	<script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijutil.js" type="text/javascript"></script>
	<link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijutil.css" rel="stylesheet" type="text/css" />

	<script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijcalendar.js" type="text/javascript"></script>
	<link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijcalendar.css" rel="stylesheet" type="text/css" />
	<script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijdropdown.js" type="text/javascript"></script>
	<link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijdropdown.css" rel="stylesheet" type="text/css" />
	<script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijtextbox.js" type="text/javascript"></script>
	<link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijtextbox.css" rel="stylesheet" type="text/css" />
	<script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijcheckbox.js" type="text/javascript"></script>
	<link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijcheckbox.css" rel="stylesheet" type="text/css" />
	
	<script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijpopup.js" type="text/javascript"></script>	
	<script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijsuperpanel.js" type="text/javascript"></script>
	<link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijsuperpanel.css" rel="stylesheet" type="text/css" />
	
	<!-- Wijmo-Complete dependencies -->
    <script src="../../wijmo/jquery.plugin.wijtextselection.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijinputcore.js" type="text/javascript"></script>
	<link href="../../themes/wijmo/jquery.wijmo.wijinput.css" rel="stylesheet" type="text/css" />
    <script src="../../wijmo/jquery.wijmo.wijinputdate.js" type="text/javascript"></script>	
    <script src="../../wijmo/jquery.wijmo.wijdatepager.js" type="text/javascript"></script>
	<link href="../../themes/wijmo/jquery.wijmo.wijdatepager.css" rel="stylesheet" type="text/css" />
    <script src="../../wijmo/jquery.wijmo.wijevcal.js" type="text/javascript"></script>
    <link href="../../themes/wijmo/jquery.wijmo.wijevcal.css" rel="stylesheet" type="text/css" />    	

	<!-- Theme -->
    <link href="../../themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

	<!-- Widget initialization -->
    <script type="text/javascript">
    	$(document).ready(function () {
    		$("#eventscalendar").wijevcal({
    			visibleCalendars: ["My", "Work"],
    			dataStorage: {
    				addEvent: _updateEvent,
    				updateEvent: _updateEvent,
    				deleteEvent: function (obj, successCallback, errorCallback) {
    					window.setTimeout(function () {
    						var curCalStore = amplify.store("calendarstore_" + obj.calendar);
    						if (!curCalStore) {
    							curCalStore = {};
    						}
    						if (curCalStore[obj.id]) {
    							delete curCalStore[obj.id];
    						}
    						amplify.store("calendarstore_" + obj.calendar, curCalStore);
    						successCallback()
    					}, 400); //simulate server delay
    					//errorCallback("Unable to delete event");
    				},
    				loadEvents: function (visibleCalendars,
											successCallback, errorCallback) {

    					var i, j, events = [];
    					window.setTimeout(function () {
    						for (i = 0; i < visibleCalendars.length; i++) {

    							var curCalStore = amplify.store("calendarstore_" + visibleCalendars[i]);
    							if (!curCalStore) {
    								curCalStore = {};
    								amplify.store("calendarstore_" + visibleCalendars[i], curCalStore);
    							}
    							for (j in curCalStore) {
    								events.push(curCalStore[j]);
    							}
    						}
    						successCallback(events);
    					}, 500);
    					//errorCallback("unable to load events");
    				},
    				addCalendar: _updateCalendar,
    				updateCalendar: _updateCalendar,
    				deleteCalendar: function (obj, successCallback, errorCallback) {
    					successCallback();
    					//errorCallback("Unable to delete calendar");
    				},
    				loadCalendars: function (successCallback, errorCallback) {
    					var calendars = [{ name: "My", id: "My", color: "red" },
									 { name: "Work", id: "Work", color: "blue"}];
    					successCallback(calendars);
    				}
    			}
    		});



    	});

    	function _updateEvent(obj, successCallback, errorCallback) {
    		window.setTimeout(function () {
    			var curCalStore = amplify.store("calendarstore_" + obj.calendar);
    			if (!curCalStore) {
    				curCalStore = {};
    			}
    			curCalStore[obj.id] = obj;
    			amplify.store("calendarstore_" + obj.calendar, curCalStore);
    			successCallback()
    		}, 400); //simulate server delay
    		//errorCallback("Unable to save event");
    	}

    	function _updateCalendar(obj, successCallback, errorCallback) {
    		successCallback();
    		//errorCallback("Unable to save calendar");
    	}
	</script>
    <style type="text/css">
        #eventscalendar
        {
            width: 750px;
        }
    </style>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Custom data storage.</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
               <div id="eventscalendar"></div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
			<p>
				This sample demonstrates how to implement custom data storage for the events calendar.
			</p>
			<p>The sample uses the <b>amplify.store</b> library in order to implement local data storage.</p>
			<p>Options used in the sample include the following:</p>
			<ul>
			<li><strong>dataStorage</strong> - use this option in order to implement the custom data storage layer.</li>
			<li><strong>visibleCalendars</strong> - array of the calendar names that need to be shown.</li>			
			</ul>

			<p>
				Note, you can use <b>dataStorage</b> methods in order to call server side web service, as well.
			</p>
				If you don't want to implement some data storage method, you can assign this method to null and the events calendar will use
				built-in implementation for this function, e.g.:
				<pre>
    	$(document).ready(function () {
    		$("#eventscalendar").wijevcal({ 
			visibleCalendars: ["My", "Work"],
			dataStorage: {
    			saveEvent: function (obj, successCallback, errorCallback) {
    				// implement your code here
    			},
    			deleteEvent: function (obj, successCallback, errorCallback) {
    				// implement your code here
    			},
    			loadEvents: function (visibleCalendars,
											successCallback, errorCallback) {
					// implement your code here
    			},
    			saveCalendar: null, // use built-in saveCalendar code
    			deleteCalendar: null, // use built-in deleteCalendar code
    			loadCalendars: null // use built-in loadCalendars code
    		}
    		});
    	});				
				</pre>
        </div>
    </div>
</body>
</html>
